<!-- 注册 -->
<template>
	<!-- 我的登录/注册 新用户注册 -->
	<view class="page">
		<view class="logo">
			<image src="../../static/logo.png" mode=""></image>
		</view>
		<!-- 填写区 -->
		<view class="input-info">
			<view class="info">
				<input type="tel" v-model="form.phone" maxlength="11" placeholder="手机号">
				<view class="more">

				</view>
			</view>
			<view class="info">
				<input type="tel" v-model="form.code" maxlength="6" placeholder="请输入验证码">
				<view class="more" @click="getCode">
					<text class="mo">{{!codeTime?'获取验证码':codeTime+'s'}}</text>
				</view>
			</view>
			<view class="info">
				<input :password='!isPassword' maxlength="26" v-model="form.password" placeholder="请输入密码">
				<view class="more">
					<text class="iconfont" :class="isPassword?'icon-eye-on':'icon-eye-off'"
						@click="isPassword = !isPassword"></text>
				</view>
			</view>
		</view>
		<!-- 按钮 -->
		<view class="btn-info">
			<view class="btn" :style="isRegister?'opacity:1':'opacity:0.4'" @click="isRegister?onRegister():''">
				<text>注册</text>
			</view>
		</view>
		<!-- 操作 -->
		<view class="operation">
			<text></text>
			<text @click="onLogin">已有账号?立即登录</text>
		</view>
		<view>
			<!-- 提示信息弹窗 -->
			<uni-popup ref="message" type="message">
				<uni-popup-message :type="msgType" :message="messageText" :duration="1000"></uni-popup-message>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	const reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
	import {
		baseUrl
	} from "../../libs/request.js"
	export default {
		data() {
			return {
				codeTime: 0,
				messageText: '',
				msgType: '',
				isPassword: false,
				isRegister: false,
				// 表单
				form: {
					phoneCode: '',
					rphone: '',
					phone: '',
					code: '',
					password: '',
				},
			};
		},
		methods: {
			onLogin() {
				uni.redirectTo({
					url: '/pages/login/riderlogin'
				})
			},
			/**
			 * 注册点击
			 */
			onRegister() {
				if (this.form.phone == this.form.rphone && this.form.code != '' && reg.test(this.form.phone)) {
					uni.request({
						url: baseUrl + "/rider/riderRegister",
						method: 'POST',
						data: {
							phone: this.form.phone,
							password: this.form.password,
							code: this.form.code,
						},
						header: {
							"Content-Type": "application/x-www-form-urlencoded"
						},
						success: (res) => {
							if (res.data == 1) {
								uni.showToast({
									title: '注册成功！快去登录把！',
									icon: 'none',
									duration: 2000
								});
								setTimeout(function() {
									uni.navigateTo({
										url: '/pages/login/riderlogin'
									})
								}, 1000)
							} else if (res.data == 2) {
								uni.showToast({
									title: '验证码有误！',
									icon: 'none',
									duration: 2000
								});
							} else {
								uni.showToast({
									title: '该手机号已被注册！',
									icon: 'none',
									duration: 2000
								});
							}
						}
					})
				} else {
					uni.showToast({
						title: '注册失败,请检查手机号和验证码是否对应!！',
						icon: 'none',
						duration: 2000
					});
				}

			},
			/* 获取注册验证码 */
			getCode() {
				if (this.form.phone != '' && reg.test(this.form.phone)) {
					if (this.codeTime > 0) {
						uni.showToast({
							title: '不能重复获取',
							icon: "none"
						});
						return;
					} else {
						uni.request({
							url: baseUrl + "/rider/getRegisterCode",
							method: 'POST',
							data: {
								phone: this.form.phone,
							},
							header: {
								"Content-Type": "application/x-www-form-urlencoded"
							},
							success: (res) => {
								if (res.data.phoneLogin == 2) {
									uni.showToast({
										title: '该手机号已被注册！',
										icon: 'none',
										duration: 2000
									});
								} else {
									uni.showToast({
										title: '发送成功！',
										icon: 'none',
										duration: 2000
									});
									this.codeTime = 60
									let timer = setInterval(() => {
										this.codeTime--;
										if (this.codeTime < 1) {
											clearInterval(timer);
											this.codeTime = 0
										}
									}, 1000)
									this.form.rphone = res.data.phone
								}
							}
						})
					}
				} else {
					uni.showToast({
						title: '请正确输入手机号！',
						icon: 'none',
						duration: 2000
					});
				}
			}
		},
		watch: {
			form: {
				handler(newValue, oldValue) {
					if (newValue.phone && newValue.code && newValue.password) {
						this.isRegister = true;
					} else {
						this.isRegister = false;
					}
				},
				deep: true
			}
		}
	}
</script>
<style scoped lang="scss">
	.page {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: #FFFFFF;
	}

	.logo {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 240rpx;

		image {
			width: 160rpx;
			height: 160rpx;
		}
	}

	/* 填写 */
	.input-info {
		padding: 0 6%;

		.info {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			height: 100rpx;
			border-bottom: 2rpx solid #f6f6f6;

			input {
				width: 70%;
				height: 100%;
				font-size: 26rpx;
				color: #222222;
			}

			.more {
				display: flex;
				align-items: center;
				justify-content: flex-end;
				width: 30%;
				height: 100%;

				.iconfont {
					font-size: 34rpx;
				}

				.mo {
					font-size: 26rpx;
					padding-left: 20rpx;
					margin-left: 10rpx;
					border-left: 2rpx solid #EEEEEE;
				}
			}
		}
	}

	/* 按钮 */
	.btn-info {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100rpx;
		margin-top: 40rpx;

		.btn {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 90%;
			height: 80rpx;
			background: orange;
			border-radius: 100rpx;
			color: #FFFFFF;
			font-size: 28rpx;
			opacity: 0.4;
		}
	}

	/* 操作 */
	.operation {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 6%;
		height: 80rpx;

		text {
			font-size: 28rpx;
			color: #555555;
		}
	}

	/* 其他 */
	.other-ways {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		height: 80rpx;
		margin-top: 100rpx;

		text {
			font-size: 28rpx;
			color: #999999;
		}
	}

	.other-ways::after {
		content: "";
		width: 36%;
		height: 2rpx;
		background-color: #EEEEEE;
	}

	.other-ways::before {
		content: "";
		width: 36%;
		height: 2rpx;
		background-color: #EEEEEE;
	}

	/* 登录方式 */
	.login-way {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 200rpx;

		.way {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 50%;
			height: 100%;

			image {
				width: 100rpx;
				height: 100rpx;
			}

			text {
				font-size: 28rpx;
				color: #959595;
				margin-top: 20rpx;
			}
		}
	}
</style>
